﻿@model object

<script type="text/javascript">
    var vehiculeMod = angular.module('vehiculeMod', []);
    vehiculeMod.controller('VehiculeBrandController', BrandController);
    vehiculeMod.controller('VehiculeModelController', VehiculeCont);

    function BrandController($scope) {
        var listm = new Array();
        $scope.listBrands = [];
        $scope.listModels = [];
        $scope.selectedBrandId = null;
        
        $.ajax({
            url: "VehiculeBrand/Brands",
            async: false,
            type: "get",
            data: {},
            dataType: "json",
            success: function (datas) {
                for (key in datas) {
                    var item = datas[key];
                    var obj = {
                        id: item.Id,
                        title: item.Title
                    };

                    $scope.listBrands.push(obj);
                }
                //console.log($scope.listBrands);
            }
        });

        var loadModels = function(modelid) {
            
            $.ajax({
                url: "VehiculeBrand/Models",
                async: false,
                type: "get",
                data: { brandId: modelid },
                dataType: "json",
                success: function (datas) {
                    
                    if (listm.length > 0) {
                        //clear list after each changing.
                        $scope.listModels.splice(0, listm.length);
                    }
                    
                    for (key in datas) {
                        var item = datas[key];
                        var obj = {
                            id: item.Id,
                            title: item.Title
                        };

                        listm.push(obj);
                    }
                    
                    $scope.listModels = listm;
                    console.log("chargement : " + $scope.listModels);
                }
            });

            return $scope.listModels;
        };

        $scope.Changed = function () {
            var model = $("#ddlModels");
            var brand = $("#ddlBrands").val();

            console.log(brand);

            if (brand != null && brand != 0) {
                $scope.selectedBrandId = brand;
                model.removeAttr("disabled");
                loadModels(brand);
            }else {
                model.attr("disabled");
                console.log("fffff");
            }

            return brand;
        };
    };

    function VehiculeCont($scope) {
        var listm = new Array();
        $scope.listModels = null;

        $.ajax({
            url: "VehiculeBrand/Models",
            async: false,
            type: "get",
            data: { brandId: 17 },
            dataType: "json",
            success: function (datas) {
                for (key in datas) {
                    var item = datas[key];
                    var obj = {
                        id: item.Id,
                        title: item.Title,
                        brandId: item.VehiculeBrandId
                    };

                    listm.push(obj);
                }
                
                $scope.listModels = listm;
            }
        });
    };
</script>

<div ng-app="vehiculeMod">
    <div ng-controller="VehiculeBrandController">
        <select id="ddlBrands" ng-model="selectedBrand" ng-change="Changed()">
            <option ng-repeat="item in listBrands" value="{{item.id}}" ng-bind="item.title"></option>
        </select>

        <select id="ddlModels" disabled ng-model="selectedModel"  ng-options="m.title for m in listModels | filter:{brandId: selectedBrand.id}"></select>
    </div>
</div>